<template>
  <div class="hello">
    <h1 v-on:click="getTime">{{ msg }}</h1>
    <h2 id="demo" @click="testFun">Essential Links</h2>
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button><br />

  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>

  <textarea v-model="message1" placeholder="add multiple lines"></textarea><br>
  <span>Multiline message is:</span>
  <p style="white-space: pre">{{ message1 }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
  return {
  msg: 'Welcome to Your Vue.js App',
  counter: 1,
  message: '',
  message1: '',
      }
  },
    methods: {
      getTime: function () {
        // alert('Hello ' + this.msg + '!');
        this.msg = Date();
        console.log("MSG" + this.msg);
      },
      testFun: function () {
        var d = new Date();
        document.getElementById("demo").innerHTML=d.getTime();
        console.log('Hello!');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
</style>
